<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 救援任务</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/rescue' }">救援任务</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="myrescue ">

            <el-card class="box-card">
                <div class="mysearch">
                    <div class="top">
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item label="订单编号">
                                <el-input v-model="id" placeholder="请输入订单编号"></el-input>
                            </el-form-item>
                            <el-form-item label="服务内容">
                                <el-input v-model="type" placeholder="请输入服务内容"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="filter">筛选</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="rtable">
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column prop="id" label="编号">
                            </el-table-column>
                            <el-table-column prop="rescueby" label="求助人">
                            </el-table-column>
                            <el-table-column prop="dicname" label="救援类型">
                            </el-table-column>
                            <el-table-column prop="carid" label="车牌">
                            </el-table-column>
                            <el-table-column prop="address" label="救援位置">
                            </el-table-column>
                            <el-table-column prop="endaddress" label="终点位置">
                            </el-table-column>
                            <el-table-column prop="applytime" label="申请时间">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div>
                        <el-pagination :current-page.sync="currentPage" :page-sizes="[1, 2, 3, 4, 5]" :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="total"
                            @current-change="handleCurrentChange" @size-change="handleSizeChange" class="rpag">
                        </el-pagination>

                    </div>

                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { selectRescueInfo } from '@/api/rescue.js'
// import { filter } from 'vue/types/umd';
export default {
    data() {
        return {
            id: '',
            type: '',
            pageNum: 1,
            pageSize: 3,
            tableData: [],
            total: 0,
            currentPage: 1
        };
    },
    mounted() {
        this.ajaxfunction()
    },
    methods: {
        handleCurrentChange(i) {
            // console.log(i);
            this.pageNum = i

            this.ajaxfunction()
        },
        handleSizeChange(i) {
            this.pageNum = 1

            this.pageSize = i
            this.ajaxfunction()
            this.currentPage = 1
            // console.log(this.currentPage);
        },
        filter() {
            this.ajaxfunction()
        },
        async ajaxfunction() {
            let obj = {
                id: this.id,
                type: this.type,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }
            const param = new URLSearchParams(obj);
            const res = await selectRescueInfo(param)
            if (res.code == 200) {
                this.tableData = res.data.list
                this.total = res.data.total
                // this.$message.success(res.msg);
            } else {
                this.$message.error('未查到数据');
            }
            return res
        }
    }
}

</script>

<style scoped>
.mysearch {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.top {
    display: flex;
    justify-content: space-between;
}
.rtable {
    margin-top: 20px;
    width: 100%;
}
.rpag {
    float: right !important;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 50%;
}
::v-deep .el-table .el-table__cell {
    text-align: center;
    font-size: 16px;
}
::v-deep th {
    height: 40px;
}
::v-deep td {
    height: 70px;
}
::v-deep .el-form-item__label {
    font-size: 18px;
    line-height: 40px;
}

</style>
